<template>
	<el-card>
		<div style="font-weight:bold;margin-bottom:10px;">设备健康状况</div>
		<div ref="chartRef" style="height:200px;width:100%;"></div>
	</el-card>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({ data: Object })
const chartRef = ref()
let chart
const renderChart = () => {
	if (!chart) chart = echarts.init(chartRef.value)
	chart.setOption({
		title: {
			text: '健康\n' + props.data.value,
			left: 'center',
			top: '38%',
			textStyle: { fontSize: 26, fontWeight: 'bold', color: '#333' }
		},
		series: [
			{
				name: '健康状况',
				type: 'pie',
				radius: ['70%', '90%'],
				avoidLabelOverlap: false,
				silent: true,
				label: { show: false },
				data: [
					{ value: props.data.value, name: '健康', itemStyle: { color: '#67C23A' } },
					{ value: props.data.max - props.data.value, name: '', itemStyle: { color: '#f6eac2' } }
				]
			}
		]
	})
}
onMounted(renderChart)
watch(() => props.data, renderChart)
</script>
  
